<template>
    <div>
          <!-- 查询 -->
    <el-form ref="form" inline :model="form">

  <el-form-item label="服务包状态">
        <el-select v-model="form.grade" placeholder="请选择" clearable>
          <el-option label="初级包" value="初级包"></el-option>
      <el-option label="中级包" value="中级包"></el-option>
      <el-option label="高级包" value="高级包"></el-option>
      <el-option label="特需定制包" value="特需定制包"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
    <el-input v-model="form.name" placeholder="请输入关键字"></el-input>
  </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="findAll()">搜索</el-button>
      <el-button type="primary"  @click="add()">新增服务包</el-button>
  </el-form>

  <!-- <p>{{ item.grade }}</p> -->

      <div id="dd" >
        <div  v-for="item in findDiv" :key="item.id" id="chu" @click="show(item)">
            <div v-if="item.status === '1'" style="float: right; width: 50px; height: 20px; margin-right: 5px; margin-top: 5px; background-color: green; color: white; text-align: center; border-radius: 5px;">   使用中</div>
            <div v-if="item.status === '2'" style="float: right; width: 50px; height: 20px; margin-right: 5px; margin-top: 5px; background-color: blue; color: white; text-align: center; border-radius: 5px;">    待审核</div>
            <div v-if="item.status === '3'" style="float: right; width: 50px; height: 20px; margin-right: 5px; margin-top: 5px; background-color: red; color: white; text-align: center; border-radius: 5px;" > 已停用  </div>
            <div v-if="item.status === '4'" style="float: right; width: 50px; height: 20px; margin-right: 5px; margin-top: 5px; background-color: brown; color: white; text-align: center; border-radius: 5px;">  已驳回</div>
            <div id="img">
                <img  :src="item.photo"  style="width: 100%;height: 150px;">
            </div>
            <div id="shuju">
              <span>{{ item.name }}</span><br><br>
                <span >{{ item.grade }}</span><br/><br>
                <span >服务对象：{{ item.sobject }}</span><br /><br>
                <span id="lname" >{{ item.lname }}</span>
            </div>
        </div>
      </div><br>

    
    
<!-- 详情页面 -->

<el-dialog title="服务包详情" fullscreen="true" :visible.sync="dialogTableVisible">
    <div id="baoxq">
        <div style="float: left;margin-left: 20px;">
            <img :src="pojo.photo" id="ximg">
        </div>
        <div id="rxq">
            <h3>{{pojo.name}}<span style="margin-left: 20px;">{{ pojo.grade }}</span></h3> 
            <p>服务标签：{{ pojo.lname }}</p>
            <p>订购价： <span style="color: red;">￥{{ pojo.price }}</span></p>
            <p>服务对象： {{ pojo.sobject }}</p>
            <p>服务介绍： {{ pojo.introduce }}</p>
        </div>
    </div>
    <!-- 包下的服务列表 -->
  <el-table :data="itempmList">
    <el-table-column property="id" label="编号" width="150"></el-table-column>
    <el-table-column property="name" label="名称" width="200"></el-table-column>
    <el-table-column property="number" label="次数"></el-table-column>
    <el-table-column property="type" label="项目类型"></el-table-column>
    <el-table-column property="introduce" label="项目介绍"></el-table-column>
  </el-table>
  <div slot="footer" class="dialog-footer" style="float: left;">
    <el-button type="primary" >编辑</el-button>
<!-- 点击停用 3 -->
  <el-button type="danger" v-if="pojo.status === '1'" @click="updateStatus(pojo.id,status=3)">停用</el-button>
  <!-- 点击使用 1 -->
  <el-button type="success" v-if="pojo.status === '2'" @click="updateStatus(pojo.id,status=1)">审核通过</el-button>
  <!-- 4 -->
  <el-button type="danger" v-if="pojo.status === '2'" @click="updateStatus(pojo.id,status=4)">审核驳回</el-button>
  <!--  1-->
  <el-button type="danger" v-if="pojo.status === '3'" @click="updateStatus(pojo.id,status=1)">启用</el-button>
  <el-button @click="dialogTableVisible = false">返回</el-button>
  </div>
</el-dialog>

<!-- 添加修改 -->
 
 <el-dialog fullscreen="true" :title="pojo.id ? '编辑服务包' : '新增服务包'" :visible.sync="dialogFormVisible2">
  <el-form :model="pojo"  :inline="true">
    <div>
    <el-form-item label="服务包名称" >
      <el-input v-model="pojo.name" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item label="请选择服务包">
    <el-select v-model="pojo.grade" placeholder="请选择" clearable>
      <el-option label="初级包" value="初级包"></el-option>
      <el-option label="中级包" value="中级包"></el-option>
      <el-option label="高级包" value="高级包"></el-option>
      <el-option label="特需定制包" value="特需定制包"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="订购价格" >
      <el-input v-model="pojo.price" placeholder="请输入" style="width: 200px;"></el-input>
    </el-form-item>
     
</div>
<div>
  <el-form-item label="服务对象" >
      <el-input v-model="pojo.sobject" placeholder="请输入" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item label="服务标签">
        <el-select v-model="pojo.bid" placeholder="请选择" clearable>
          <el-option  v-for="t in lableList" :key="t.id"  :label="t.name" :value="t.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="签约周期">
      <el-select v-model="pojo.cycle" placeholder="请选择" clearable>
      <el-option label="1年" value="1年"></el-option>
      <el-option label="2年" value="2年"></el-option>
      <el-option label="3年" value="3年"></el-option>
    </el-select>
    </el-form-item>
</div>
<el-form-item label="签约情况">
  <template>
  <el-radio v-model="pojo.renewal" label="1">可签约</el-radio>
  <el-radio v-model="pojo.renewal" label="2">不可签约</el-radio>
</template>
</el-form-item><br>
<el-form-item label="服务包图片"  >
        <el-upload style="width: 100px; height: 100px;"
            :show-file-list="false"
            :on-success="onUploadPosterSuccess"
            :before-upload="beforeUpload"
            :multiple="true"
            action="Http://localhost:8300/phl/doctor/uufile"
            list-type="picture-card">
          <img v-if="fileUrl" :src="pojo.photo" id="photo" style="width: 100px; height: 100px;">点击上传
        </el-upload>
      </el-form-item><br>
      <el-form-item label="服务介绍">
    <el-input type="textarea" v-model="pojo.introduce"></el-input>
  </el-form-item>

  <!-- 添加服务项目 -->
   <div>
    <span>服务项目</span>
    <el-button  type="primary" style="float: right;" @click="addfuwu()">添加服务项目</el-button>
   </div>
  <el-dialog width="80%" :visible.sync="dialogTableVisible2">
    <el-table
      ref="multipleTable" :data="fuwuxm" tooltip-effect="dark"
      style="width: 95%" >
      <el-table-column type="selection" width="55"> </el-table-column>
 
      <el-table-column prop="id" label="编号" width="80"> </el-table-column>
      <el-table-column prop="name" label="项目名称" width="120px"></el-table-column>
      <el-table-column prop="number" label="次数" width="80px">
        <template slot-scope="scope">
            <span style="color: blue;">{{ scope.row.number }}次</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="项目类型" width="100px"></el-table-column>
      <el-table-column prop="price" label="项目原价(元)" width="80px">
        <template slot-scope="scope">
            <span style="color: red;">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="introduce" label="项目介绍" width="300px"></el-table-column>
    </el-table>
    <div>
      <el-button type="primary" @click="saveItem()">确 定</el-button>
      <el-button type="danger" @click="dialogTableVisible2 = false">取 消</el-button>
    </div>
</el-dialog>
<!-- 服务项目列表 -->
<el-table :data="fwxmlb">
    <el-table-column property="id" label="编号" width="150"></el-table-column>
    <el-table-column property="name" label="名称" width="200"></el-table-column>
    <el-table-column property="number" label="次数"></el-table-column>
    <el-table-column property="type" label="项目类型"></el-table-column>
    <el-table-column property="introduce" label="项目介绍"></el-table-column>
  </el-table>
<!--  -->
  </el-form>
  <div slot="footer" class="dialog-footer" style="float: left;">
    <el-button @click="dialogFormVisible2 = false">返 回</el-button>
    <el-button type="primary" @click="saveOrUpdate()">保 存</el-button>
  </div>
</el-dialog> 


    </div>
  </template>
  
  <script>
  import axios from "axios";
  
  export default {
    data() {
      return {
        findDiv:[],
        form:{},
        chu: [],
        zhong: [],
        gao: [],
        te: [],
        itempmList:[],
        dialogTableVisible:false,
        dialogFormVisible2:false,
        dialogTableVisible2:false,
        pojo:{},
        lableList:[],
        fileUrl: null,
        fuwuxm:[],
        ids:[],
        fwxmlb:[],


      };
    },
    methods: {


      saveItem(){
        //拿到服务项目的id
        let fuwu = this.$refs.multipleTable.selection;
        this.ids = fuwu.map(item => item.id);
        console.log(this.ids);
        axios.post("itempm/findId",this.ids).then((res) => {
          this.fwxmlb = res.data.data;
          console.log(JSON.stringify(this.fwxmlb)+"fffffffffffffffffffffffbbbbbbbbbbbbbbbbbbbbb");
          this.dialogTableVisible2=false;
        });
      },
      // 添加服务
      addfuwu(){
        this.dialogTableVisible2=true;
        axios.post("itempm/findItempm").then((res) => {
          this.fuwuxm = res.data.data;
        })
      },

      saveOrUpdate(){
        console.log(this.pojo);
        let serviceIds = {};
        serviceIds.ids = this.ids;
        serviceIds.zlService = this.pojo;
        // console.log(JSON.stringify(this.ids+"iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii"))
        if(this.ids.length==0){
          this.$message({
            type: 'warning',
            message: '至少选择一个服务项目'
          });
        }else{
          axios.post("/service/saveOrUpdate",serviceIds).then((res) => {
          this.findAll();
          this.dialogFormVisible2=false;
        });
        }
      },
      beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传头像图片只能是 JPG、PNG 或 GIF 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
      //  文件成功上传后的回调
      onUploadPosterSuccess(res) {
      console.log(res)
      this.pojo.photo=res.data;
      console.log(this.pojo.photo+"图片");
      this.fileUrl=true;
    },

      //打开添加页面
      add(){
        this.pojo={};
        this.fuwuxm=[];
        this.ids=[];
        this.dialogFormVisible2 = true;
      },

      //查询服务标签
      findLable(){
          axios.post("/service/findLabe").then((res) => {
              this.lableList = res.data;
          });
      },
        // 状态变更
        updateStatus(id,status){
            console.log("id="+id+"status="+status);
            axios.post(`/service/updateStatus/${id}/${status}`).then((res) => {
                this.findAll();
                this.dialogTableVisible = false;
            });
        },
        // 拿到外键去查询本包的服务
        show(item) {
            this.pojo = item;
            let id = item.id;
            // console.log(id+"ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff");
            if(id!=null){
                axios.post(`/service/findItempm/${id}`).then((res) => {
                    console.log(res.data.data);
                    this.itempmList = res.data.data;
                    this.dialogTableVisible = true;
                });
            }
        },
      // getChu() {
      //   let gname = "初级服务包";
      //   axios.post(`/service/findChu/${gname}`).then((res) => {
      //     this.chu = res.data.data;
      //   });
      // },
      // getZhong() {
      //   let gname = "中级服务包";
      //   axios.post(`/service/findZhong/${gname}`).then((res) => {
      //     this.zhong = res.data.data;
      //   });
      // },
      // getGao() {
      //   let gname = "高级服务包";
      //   axios.post(`/service/findGao/${gname}`).then((res) => {
      //     this.gao = res.data.data;
      //   });
      // },
      // getTe() {
      //   let gname = "特级服务包";
      //   axios.post(`/service/findTe/${gname}`).then((res) => {
      //     this.te = res.data.data;
      //   });
      // },
      findAll(){
      //   this.getChu();
      // this.getZhong();
      // this.getGao();
      // this.getTe();
      axios.post(`service/findAll`,this.form).then((res) => {
          this.findDiv = res.data.data;
          this.chu = this.findDiv.filter(item => item.grade === '初级包');
          this.zhong = this.findDiv.filter(item => item.grade === '中级包');
          this.gao = this.findDiv.filter(item => item.grade === '高级包');
          this.te = this.findDiv.filter(item => item.grade === '特需定制包');
          // console.log(JSON.stringify(this.findDiv)+"---------------------------------------------------------");
          // console.log(JSON.stringify(this.chu)+"CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC");
      });
      },
    },
    created() {
      // this.getChu();
      // this.getZhong();
      // this.getGao();
      // this.getTe();
      this.findLable();
      this.findAll();
    },
  };
  </script>
  
  <style scoped>
  #dd {
    /* width: 1100px; */
    height: 210px;
    /* border: 2px solid #4800ff; */
    /* margin-bottom: 100px; */
  }
  #chu {
    width: 340px;
    /* height: 150px; */
    /* border: 4px solid #1eed0c; */
    float: left;
    margin-left: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
  }
  #chu:hover {
    /* background-color: rgb(55, 195, 237); */
    background-color: rgb(242, 253, 255);
    /* opacity: 0.1; */
  }
  #img {
    width: 36%;
    height: 170px;
    /* border: 2px solid #3518a9; */
    float: left;
    margin-top: 15px;
    margin-left: 10px;
  }
  #shuju {
    display: block;
    width: 56%;
    height: 170px;
    border: 2px solid #ffffff;
    float: right;
    /* margin-top: 10px; */
  }
  #lname{
    color: crimson;
  }
  #baoxq{
    width: 1200px;
    height: 300px;
    border: #a02727 2px solid;
    background: aquamarine;
  }
  #ximg{
    width: 220px;
    height: 220px;
    border: #a02727 2px solid;
    border-radius: 10px;
    margin-top: 40px;
    margin-right: 60px;
  }
  #rxq{
    width: 800px;
    height: 220px;
    border: #a02727 2px solid;
    border-radius: 10px;
    margin-top: 40px;
    margin-right: 20px;
    float: left;
  }
  </style>